<template>
  <div id="login">
    <div class="login">
      <div class="logo">
        <img alt src="../../../assets/img/download.png" />
      </div>
      <div class="tips">
        <label id="tip_one">请联系软件供应商获取许可证</label>
      </div>
      <div style="display: block;font-size: 14px;margin-left: 60px">
        <label
          >识别码:
          <el-input
            style="width: 300px;margin-left: 19px"
            auto-complete="off"
            type="text"
            disabled="disabled"
            v-model="uid"
          ></el-input
        ></label>
      </div>
      <el-form
        :model="licenseForm"
        
        :rules="rules"
        class="demo-ruleForm"
        label-width="72px"
        ref="licenseForm"
        :label-position="'left'"
        status-icon
      >
        <el-form-item style="margin-top: 10px" label="注册码:" prop="key">
          <el-input
            style="width: 300px;margin-top: 4px"
            ref="key"
            auto-complete="off"
            type="text"
            v-model="licenseForm.key"
          ></el-input>
        </el-form-item>
        <div>
          <el-button
            style="margin-left: 200px;"
            @click="submitForm('licenseForm')"
            type="primary"
            >激活
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">


export default {
  name: "",
  data() {
    return {
      licenseForm: {
        key: "",
      },
      rules: {
        key: [{validator: this.keyValidation, trigger: "blur"}],
      },
      uid:""
    };
  },
  created() {
  },
  methods: {
    keyValidation(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入注册码"));
      } else {
        callback();
      }
    },

    async getLicenseReqId() {
        try {
          let res = await this.$api.get(`/getLicenseReqId`);
          
              this.uid = res.bean;
          
        } catch (e) {
          this.$message.error(e);
        }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            let res = await this.$api.post("/licenseReg", {
              key: this.licenseForm.key,
            });
            
              this.$message.success(this.$t('msg.msg77'));
              setTimeout(() => {
                this.$router.push({name: 'login'});
              }, 3000);
            
          } catch (e) {
            this.$message.error(e);
          }
        }
      });
    },
  },
  mounted() {
    const params = this.$route.params;
    if(params.uid&&params.uid!==""){
      this.uid = params.uid;
    }else {
      this.getLicenseReqId();
    }
  },
  components: {},
};
</script>

<style scoped>
#login {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 310px;
  height: auto;
  margin-bottom: 9px;
  padding: 40px 0 40px 60px;
}

.logo img {
  display: block;
  width: 100%;
}

.login {
  width: 619px;
  height: 362px;
  border: 1px solid #b4b4b4;
  padding-top: 30px;
}

.tips {
  padding-left: 60px;
  display: block;
}

#tip_one {
  color: red;
  font-size: 15px;
}
</style>
